<template>
  <div class="login-container">
    <div class="logo">
      <img src="@/assets/pic/logo.png" alt="">
    </div>
    <div class="loginBox">
      <div id="tabs-container">
          <div name="login" :class="['tabs-items', activeName == 'login' ? 'actives' : '']" @click="handleLoginRegister('login')">登录</div>
          <div name="register" :class="['tabs-items', activeName == 'register' ? 'actives' : '']" @click="handleLoginRegister('register')">注册</div>
      </div>
      <div v-if="activeName == 'login'">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules1" class="login-form" auto-complete="on"
          label-position="left">
          <el-form-item prop="mobile">
            <el-input type="text" ref="mobile" prefix-icon="el-icon-user" v-model="loginForm.mobile" auto-complete="off"
              placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item prop="password" v-if="passwordType == 'password'">
            <el-input type="password" ref="password" prefix-icon="el-icon-lock" v-model="loginForm.password"
              auto-complete="off" placeholder="请输入密码"></el-input>
          </el-form-item>
          <!-- <div style="display: flex">
            <el-form-item prop="code" style="width: 160px">
              <el-input size="large" class="input-wid" v-model="loginForm.code" placeholder="点击图片刷新"></el-input>
            </el-form-item>
            <div class="w-18px" />
            <div class="login-code">
              <img :src="validCodeUrl" @click="getCode" class="login-code-img" />
            </div>
          </div> -->
          <el-form-item prop="smsCode" v-if="passwordType == 'sms'">
            <div style="display: flex;align-items: center;">
              <el-col :span="14">
                <el-input v-model="loginForm.smsCode" placeholder="短信验证码" clearable maxlength="6" />
              </el-col>
              <!--              <el-col class="line" :span="2">-</el-col>-->
              <el-col :span="10" class="btn">
                <el-button id="btn" type="primary" style="width:100%;" @click="sendCode('loginForm')">{{ smsBtn
                }}</el-button>
              </el-col>
            </div>
          </el-form-item>
          <!-- <div class="ckeckout">
            <el-link v-if="passwordType == 'password'" @click="checkType('sms')">短信验证码登录</el-link>
            <el-link v-else @click="checkType('password')">账号登录</el-link>
          </div> -->
          <!-- <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox> -->
          <el-form-item style="width:100%;">
            <el-button style="width:100%;background-color: #0a314b;height: 44px;border-color: #0a314b;color: #fff;border-radius: 8px" round
              @click.native.prevent="handleLogin('loginForm')" :loading="loading">
              立即登录</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="activeName == 'register'">
        <el-form ref="registerForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
          label-position="left">
          <el-form-item prop="phone">
            <el-input type="text" v-model="loginForm.mobile" prefix-icon="el-icon-mobile-phone" auto-complete="off" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-lock" auto-complete="off" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item prop="rpassword">
            <el-input type="password" v-model="loginForm.rpassword"  prefix-icon="el-icon-lock" auto-complete="off" placeholder="请再次输入密码"></el-input>
          </el-form-item>
          <div style="display: flex">
            <el-form-item prop="code" style="width: 160px">
              <el-input size="large" class="input-wid" v-model="loginForm.code" placeholder="点击图片刷新"></el-input>
            </el-form-item>
            <div class="w-18px" />
            <div class="login-code">
              <img :src="validCodeUrl" @click="getCode" class="login-code-img" />
            </div>
          </div>
          <!-- <el-form-item prop="smsCode">
            <div style="display: flex;align-items: center;">
              <el-col :span="14">
                <el-input v-model="loginForm.smsCode" placeholder="短信验证码" clearable maxlength="6" />
              </el-col>
              <el-col :span="10" class="btn">
                <el-button id="btn" style="width:100%;background-color: #0a314b;height: 44px;border-color: #0a314b;color: #fff;"
              round @click="sendCode('loginForm')">{{ smsBtn
                }}</el-button>
              </el-col>
            </div>
          </el-form-item> -->
          <el-form-item style="width:100%;">
            <el-button style="width:100%;background-color: #0a314b;height: 44px;border-color: #0a314b;color: #fff;border-radius: 8px" round
              @click.native.prevent="registerLogin('registerForm')" :loading="loading">
              注 册</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- <div id="tabs">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="登录" name="login"></el-tab-pane>
          <el-tab-pane label="注册" name="register"></el-tab-pane>
        </el-tabs>
      </div> -->
    </div>
  </div>
</template>

<script>
import { getCaptcha, register } from "@/api/user";
import { setToken } from '@/utils/auth'
export default {
  name: 'Login',
  data() {
    const validatePhoneNumber = (rule, value, callback) => {
      const reg = /^1[3456789]\d{9}$/
      if (!reg.test(value)) {
        // 手机号码不符合规则
        callback(new Error('手机号码不正确'))
      } else {
        callback()
      }
    }
    // var validatePass = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请输入密码'));
    //   } else {
    //     if (this.loginForm.rpassword !== '') {
    //       this.$refs.loginForm.validateField('rpassword');
    //     }
    //     callback();
    //   }
    // };
    // var validatePass2 = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请再次输入密码'));
    //   } else if (value !== this.loginForm.password) {
    //     callback(new Error('两次输入密码不一致!'));
    //   } else {
    //     callback();
    //   }
    // }
    var validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (this.loginForm.password !== this.loginForm.rpassword) {
        callback(new Error('两次输入的密码不一致'));
      } else {
        callback();
      }
    };
    return {
      activeName: 'login',
      uniqid: '',
      validCodeUrl: '',
      loginForm: {
        code: '',
        // mobile: '15102805324',
        mobile:'',
        // password: '1234567',
        password: ''
      },
      smsBtn: '发送验证码',
      loginRules: {
        mobile: [{ required: true, trigger: 'blur', message: '请输入账号' }],
        password: [{ required: true,  validator: validatePassword, trigger: 'blur' }],
        repassword: [{ required: true, validator: validatePassword, trigger: 'blur' }],
        smsCode: [{ required: true, trigger: 'blur', message: '请输入短信验证码' }],
        code: [{ required: true, trigger: 'blur', message: '请输入图形验证码' }]
      },
      loginRules1: {
        mobile: [{ required: true, trigger: 'blur', message: '请输入账号' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined,
      otherQuery: {}
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    },
    activeName: {
      handler: function (newVal, oldVal) {
        // 对属性变化作出响应
        console.log(newVal, oldVal)
        if (newVal == 'register') {
          this.getCode()
        }
      },
      immediate: true
    }
  },
  mounted() {
    if (this.loginForm.mobile === '') {
      this.$refs.mobile.focus()
    } else if (this.loginForm.password === '') {
      this.$refs.password.focus()
    }
  },
  methods: {
    // 获取图形验证码
    getCode() {
      getCaptcha().then(res => {
        console.log(res)
        this.uniqid = res.data.uniqid
        this.validCodeUrl = res.data.image
      })
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 切换内容
    handleLoginRegister(tab) {
        this.activeName = tab
    },
    checkType(e) {
      this.passwordType = e
      this.getCode()
    },
    registerLogin(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true
          this.loginForm.uniqid = this.uniqid
          register({ form: this.loginForm }).then(res => {
            console.log(res)
            setToken(res.data.token)
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          this.getCode()
          return false
        }
      })
    },
    handleLogin(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #283443;
$light_gray: #fff;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.login-container {
  height: 100%;

  .el-input__prefix {
    i {
      margin-top: 3px;
    }
  }

  .el-form-item__error {
    left: 37px;
  }

  .el-input {
    display: inline-block;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    // width: 85%;
    color: #235db4;
    display: flex;
    // box-shadow: 0px 1px 2px 0 rgba($color: #000000, $alpha: 0.1);
    border: 1px solid #e5e7eb;
    justify-content: center;
    align-items: center;

    input {
      // background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 35px;
      color: #555555;
      height: 47px;
      // caret-color: $cursor;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  .el-form-item {
    // border: 1px solid rgba(255, 255, 255, 0.1);
    // background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #555555;
  }

  #tabs {
    .el-tabs__item {
      color: #fff;
    }

    .el-tabs__item.is-active {
      color: #409eff;
    }

    .el-tabs__active-bar {
      height: 0;
    }

    .el-tabs__nav-wrap::after {
      height: 0;
    }

    .el-tabs__nav-scroll {
      display: flex;
      justify-content: center;
    }
  }
}
</style>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.ckeckout {
  padding: 0 15px;
  margin-bottom: 20px;
}

.ckeckout .el-link.el-link--default {
  color: #fff;
}

.el-link.el-link--default:hover {
  color: #409eff;
}

.login-container {
  min-height: 100%;
  width: 100%;
  // background-color: $bg;
  overflow: hidden;
  background: url('../../assets/pic/loginbg.jpg') no-repeat;
  background-size: 100% auto;
  position: relative;

  .loginBox {
    position: absolute;
    left: 50%;
    top: 40%;
    margin-left: -175px;
  }

  .logo {
    position: absolute;
    top: 25%;
    left: 50%;
    margin-left: -175px;
    img {
      width: 68%;
    }
  }

  .footer {
    position: absolute;
    bottom: 5%;
    left: 10%;
    font-size: 14px;

    span {
      margin-right: 14px;
    }
  }

  .login-form {
    position: relative;
    width: 350px;
    max-width: 100%;
    padding: 20px 15px 20px;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    .btn {
      float: right;

      #btn {
        float: right;
      }
    }
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }

  // .login-code-img {
  //   height: 38px;
  // }

  .login-code {
    flex: 1;
    // width: 33%;
    height: 48px;
    float: right;
  }

  img {
    width: 100%;
    height: 100%;
    cursor: pointer;
    vertical-align: middle;
  }
  #tabs-container{
    background-color: #f4f4f5;
    color: #000;
    display: flex;
    justify-content: space-between;
    border-radius: 8px;
    padding: 4px;
    line-height: 34px;
    margin-bottom: 10px;
    .tabs-items{
       flex: 1;
       text-align: center;
       color: #71717a;
       cursor: pointer;
    }
    .actives{
        color: #000;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
    }
  }
}
</style>
